// 布局
@mixin flex-column {
  display: flex;
  align-items: center;
  flex-direction: column;
}

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
  @content;
}

@mixin abs-center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin abs-l-center() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  @content;
}

@mixin abs-full() {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

@mixin fixed-center() {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin fixed-full() {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

// 快捷设置
@mixin bg($url: '', $suffix: '.png') {
  $url: '~@/assets/img/' + $url + $suffix;

  background-image: url($url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  @content;
}

@mixin bg2($url: '', $suffix: '.png') {
  $url: 'http://fepublicty.tiyalive.com/tiya/activities/us-halloween/' + $url + $suffix;

  background-image: url($url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  @content;
}

@mixin bg3($url: '', $suffix: '.png') {
  $url: '~@/assets/images/' + $url + $suffix;
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  @content;
}

@mixin text-hidden($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@mixin had-img() {
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@mixin text-ellipsis{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 效果
@mixin stroke-text($bg: #fff, $weight: 4px, $offsetX: 0, $offsetY: 0) {
  position: relative;
  z-index: 0;

  &::after {
    content: attr(data-text);
    position: absolute;
    left: $offsetX;
    top: $offsetY;
    -webkit-text-stroke: $bg $weight;
    z-index: -1;
  }
}

@mixin shadow-button($bg: rgb(65, 184, 131), $heigh: 2px, $pushOffset: 1px, $activeBg: $bg) {
  display: inline-block;
  box-shadow: 0 $heigh 0 $bg;

  &:active {
    box-shadow: 0 ($heigh - $pushOffset) 0 $activeBg;
    transform: translateY($pushOffset);
  }
}

@mixin rank-list {
  height: 40px;
  // @include flex-center;
  display: flex;
  align-items: center;
  // justify-content: center;
  padding: 0 12px 4px 0px;
  box-sizing: border-box;
  font-size: 12px;
  margin-bottom: 20px;
  // &:not(:last-child) {
  //   margin-bottom: 20px;
  // }



  .item {
    &-index {
      @include had-img();
      font-family: 'SFProRounded-Medium';
      font-size: 16px;
      font-weight: 900;
      color: #b8701c;
      margin-right: 8px;
      width: 40px;
      font-weight: 900;
      text-align: center;
      &>img{
        width: 27px;
      }
    }
    &-box {
      display: flex;
      

      .box {
        &-img {
          @include had-img();
          width: 40px;
          &>img{
            border-radius: 50%;
          }
          // height: 40px;

        }
        &-info {
          display: flex;
          justify-content: space-between;
          margin-left: 8px;
          .font {
            text-align: left;
            font-family: 'SFProRounded-Medium';
            font-size: 14px;
            font-weight: bold;
            color: #cc5316;
            
          }
          .info {
            &-user {
              width: 120px;
              margin-right: 8px;
              display: flex;
              flex-direction: column;
              .username, .userid{
                @include text-ellipsis;
              }
              .userid {
                font-size: 11px;
                font-weight: 500;
              }
            }
            &-time{
              
              @include text-ellipsis;
              font-size: 12px;
              width: 75px;
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
